<template>
	<view class='flex commonHead'
		:style="{ '--backgroundColor': myProperty.backgroundColor, '--backgroundImage': myProperty.backgroundImage }">
		<view class='commonHead-wrap flex'>
			<!-- 0:无返回；1：返回上一级；2：home -->
			<view class='commonHead_left'>
				<view v-if="myProperty.flag==1" class='commonHead_left_back' @click='commonHead_left_back'></view>
				<view v-else-if="myProperty.flag==2" class='commonHead_left_home' @click='commonHead_left_home'></view>
			</view>
			<view class='commonHead_right flex' v-if="myProperty.name">
				<view class='commonHead_right_text line1'>{{myProperty.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			myProperty: {
				type: Object,
				default: {
					color: "#FFFFFF",
					flag: 1,
					name: "我是标题",
					backgroundColor: "#0060FF",
					backgroundImage: "linear-gradient(258deg, #0060FF 0%, #0052D9 100%)",
				}
			}
		},
		data() {
			return {
				commonHeadHeight: {},
				titleHeight: '',
				statusBarHeight: ''
			}
		},
		mounted() {
			var that = this;
			console.log('mounted')
			uni.getSystemInfo({
				success(res) {
					console.log(res.model)
					console.log(res.pixelRatio)
					console.log(res.windowWidth)
					console.log(res.windowHeight)
					console.log(res.screenHeight)
					console.log(res.language)
					console.log(res.version)
					that.commonHeadHeight.statusBarHeight = (34 * 2)
					that.commonHeadHeight.titleHeight = res.statusBarHeight + 46
					that.statusBarHeight = (34 * 2)
					that.titleHeight = res.statusBarHeight + 46
				}
			})
		},
		methods: {
			commonHead_left_back() {
				console.log("back")
				uni.navigateBack();
			},
			commonHead_left_home() {
				console.log("home")
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*弹性布局*/
	.flex {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		display: box;
		flex-wrap: wrap;
	}

	.noWarp {
		flex-wrap: nowrap;
	}

	/*元素居中*/
	.alignC {
		align-items: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		-o-align-items: center;
	}

	/*水平排列*/
	.flexH {
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;
	}

	/*垂直排列*/
	.flexV {
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	/*两端对齐*/
	.flexSa {
		-webkit-box-pack: justify;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		-moz-justify-content: space-around;
		-ms-justify-content: space-around;
		-o-justify-content: space-around;
	}

	/*居中对齐*/
	.flexC {
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		-ms-justify-content: center;
		-o-justify-content: center;
	}

	.flexSb {
		justify-content: space-between;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
	}

	.flexS {
		-webkit-box-pack: start;
		justify-content: flex-start;
		-webkit-justify-content: flex-start;
		-moz-justify-content: flex-start;
		-ms-justify-content: flex-start;
		-o-justify-content: flex-start;
	}

	.flexE {
		-webkit-box-pack: end;
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
		-moz-justify-content: flex-end;
		-ms-justify-content: flex-end;
		-o-justify-content: flex-end;
	}

	.line1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.commonHead {
		width: 100%;
		height: 128rpx;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		overflow: hidden;
		position: relative;
		z-index: 10;
		position: fixed;
		background-color: var(--backgroundColor);
		background-image: var(--backgroundImage);
	}

	.commonHead-wrap {
		width: 100%;
		position: absolute;
		overflow: hidden;
		left: 0;
		bottom: 0;
		height: 45px;
		line-height: 45px;
	}

	.commonHead_left {
		width: 100rpx;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0
	}

	.commonHead_left_back {
		width: 100%;
		height: 100%;
		background-image: url();
		background-size: 20%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.commonHead_left_home {
		width: 100%;
		height: 100%;
		background-image: url();
		background-size: 40rpx 40rpx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.commonHead_right {
		/* width: 450rpx; */
		width: 100%;
		height: 100%;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		overflow: hidden;
		justify-content: flex-end;
	}

	.commonHead_right_text {
		/* width: 450rpx; */
		width: 280rpx;
		margin: 0 auto;
	}
</style>
